const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    plugins: [new HtmlWebpackPlugin({
        template: './public/index.html'
    })],

    module: {
        rules: [{
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/i,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                type: 'asset'
            },

            {
                test: /\.(woff|svg|eot|ttf|woff2)$/i,
                type: 'asset/resource', // 永远不会转成 base64 直接复制文件到出口
                generator: { // 生成器
                    // [name]: 占位符变量, 最终会被替换成原来的文件名
                    // [hash]: 生成 hash 值
                    // [ext]: 原先的后缀名
                    filename: 'fonts/[name]-[hash:4][ext]'
                }
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
        ],
    },
    devServer:{
        port:3000,
        open:true
    },
    mode:"development"

};